<template>
  <div class="login-container">
    <div class="form-container">
      <h2>登录</h2>
      <el-form :model="loginForm" :rules="rules" ref="loginFormRef">
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" placeholder="用户名/邮箱"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <div class="form-operations">
          <el-link type="primary" @click="forgotPassword">忘记密码？</el-link>
        </div>
        <el-button type="primary" class="submit-btn" @click="handleLogin">登录</el-button>
        <div class="register-link">
          <span>还没有账号？</span>
          <el-link type="primary" @click="goToRegister">快速注册</el-link>
        </div>
      </el-form>
    </div>
    <div class="welcome-container">
      <h1>欢迎来到<br/>GarbageRec!</h1>
      <div class="welcome-text">
        <p>智慧管理，让回收更简单</p>
        <p>环保与科技同行，共建美好未来</p>
        <p>回收管理，智能引领</p>
        <p>世界之大，皆可可及</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, reactive} from 'vue'
import {useRouter} from 'vue-router'
import axios from 'axios'
import {ElMessage} from 'element-plus'

const router = useRouter()
const loginFormRef = ref(null)

const loginForm = reactive({
  username: '',
  password: ''
})

const rules = {
  username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
  password: [{required: true, message: '请输入密码', trigger: 'blur'}]
}

const handleLogin = async () => {
  if (!loginFormRef.value) return
  await loginFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        // 向后端 /login 接口发起POST请求，传递 {username, password}
        const response = await axios.post('http://localhost:8080/login', {
          username: loginForm.username,
          password: loginForm.password
        })

        // 根据后端统一响应封装判断：成功时 code 为1
        if (response.data && response.data.code === 1) {
          // 假设返回数据中 data 包含 token 信息
          const token = response.data.data?.token
          if (token) {
            // 将 token 保存在 localStorage 中或其他状态管理库中
            localStorage.setItem("user", JSON.stringify({
              username: response.data.data.username,
              role: response.data.data.role,
              token: response.data.data.token
            }))

            // 设置 axios 默认请求头，后续请求自动带上 token
            // axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
          }
          ElMessage.success('登录成功')
          // 登录成功后跳转到首页
          window.location.href = '/'  // 或者是你首页的路由地址
        } else {
          ElMessage.error(response.data.message || '登录失败')
        }
      } catch (error) {
        console.error('登录请求出错:', error)
        ElMessage.error('网络异常或服务器错误')
      }
    }
  })
}

const forgotPassword = () => {
  // 实现忘记密码逻辑
  console.log('忘记密码')
}

const goToRegister = () => {
  router.push('/register')
}
</script>

<style scoped>
.login-container {
  display: flex;
  min-height: 79.9vh;
  background: linear-gradient(135deg, #1e90ff 0%, #67C23A 100%);
  align-items: center;
  justify-content: center;
  padding: 2rem;
  gap: 0;
}

.form-container,
.welcome-container {
  flex: 0 1 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  min-height: 400px;
}

.form-container {
  background: white;
  border-radius: 10px 0 0 10px;
  animation: fadeInLeft 0.8s ease-out forwards;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.welcome-container {
  color: white;
  background: linear-gradient(135deg, #3aa1ad 0%, rgb(148.6, 212.3, 117.1) 100%);
  border-radius: 0 10px 10px 0;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  animation: fadeInRight 0.8s ease-out forwards;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

h2 {
  margin-bottom: 2rem;
  font-size: 1.8rem;
  color: #333;
  opacity: 0;
  animation: fadeIn 0.8s ease-out 0.4s forwards;
}

.welcome-container h1 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeIn 0.8s ease-out 0.4s forwards;
}

.welcome-text p {
  margin: 0.5rem 0;
  font-size: 1.1rem;
  opacity: 0;
  animation: fadeIn 0.8s ease-out forwards;
}

.welcome-text p:nth-child(1) {
  animation-delay: 0.6s;
}

.welcome-text p:nth-child(2) {
  animation-delay: 0.8s;
}

.welcome-text p:nth-child(3) {
  animation-delay: 1.0s;
}

.welcome-text p:nth-child(4) {
  animation-delay: 1.2s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.9;
  }
}

@media (max-width: 768px) {
  .login-container {
    flex-direction: column;
    padding: 1rem;
  }

  .form-container,
  .welcome-container {
    flex: 0 1 auto;
    width: 100%;
    max-width: 100%;
    min-height: 400px;
  }

  .form-container {
    border-radius: 10px 10px 0 0;
  }

  .welcome-container {
    border-radius: 0 0 10px 10px;
  }
}

h2 {
  margin-bottom: 2rem;
  font-size: 1.8rem;
  color: #333;
}

.el-form {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.form-operations {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.submit-btn {
  width: 100%;
  margin-bottom: 1rem;
  height: 40px;
}

.register-link {
  text-align: center;
  margin-top: 1rem;
}

.welcome-container h1 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeIn 0.8s ease-out 0.4s forwards;
}

.welcome-text p {
  margin: 0.5rem 0;
  font-size: 1.1rem;
  opacity: 0;
  animation: fadeIn 0.8s ease-out forwards;
}

.welcome-text p:nth-child(1) {
  animation-delay: 0.6s;
}

.welcome-text p:nth-child(2) {
  animation-delay: 0.8s;
}

.welcome-text p:nth-child(3) {
  animation-delay: 1.0s;
}

.welcome-text p:nth-child(4) {
  animation-delay: 1.2s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.9;
  }
}

@media (max-width: 768px) {
  .login-container {
    padding: 1rem;
  }

  .form-container {
    max-width: 100%;
    border-radius: 10px 10px 0 0;
  }

  .welcome-container {
    max-width: 100%;
    border-radius: 0 0 10px 10px;
    padding: 2rem;
  }
}
</style>